<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements.  See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License.  You may obtain a copy of the License at
~
~    http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~
-->

<div class="sp-dialog-container">
    <div class="sp-dialog-content p-15">
        <div fxFlex="100">
            <div fxFlex="100" style="margin: 5px; width: 100%">
                <div fxLayout="column" style="width: 100%">
                    <div fxFlex="100" fxLayoutAlign="center" fxLayout="column">
                        <b>
                            <h4>
                                A file with the same name already exists. Please
                                select from existing files or rename it:
                            </h4>
                        </b>
                        <div class="input-group">
                            <span style="margin-right: 10px"
                                >new filename:</span
                            >
                            <mat-form-field>
                                <input
                                    matInput
                                    placeholder="new filename"
                                    [(ngModel)]="fileName"
                                />
                            </mat-form-field>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <mat-divider></mat-divider>
    <div class="sp-dialog-actions">
        <button
            mat-button
            mat-raised-button
            color="accent"
            [mat-dialog-close]="fileName"
            data-cy="sp-file-management-store-file"
            style="margin-right: 10px"
        >
            Rename file
        </button>
        <button
            mat-button
            mat-raised-button
            class="mat-basic"
            (click)="cancel()"
            style="margin-right: 10px"
        >
            Cancel
        </button>
    </div>
</div>
